<template>
    <div>
        <div class="ItemMusicTop">
            <img :src="playlist.coverImgUrl
            " alt="" class="bgIMg">
            <div class="itemLeft">
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <span>歌单</span>
            </div>
            <div class="itemRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hanbaobao"></use>
                </svg>
            </div>
        </div>
        <div class="ItemMusicMiddle">
            <div class="contentLeft">
                <img :src="playlist.coverImgUrl" alt="">
            </div>
            <div class="contentRight">
                <p class="rightP_one">{{ playlist.name }}</p>
                <div class="right_img" v-if="playlist.creator">
                    <img :src="playlist.creator.backgroundUrl">
                    <span>{{ playlist.creator.nickname }}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                </div>
                <p class="rightP_two">
                    <span>{{ onChange(playlist.description) }}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                </p>
            </div>
        </div>
        <div class="itemTopFooter">
            <div class="FooterItem">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinxi"></use>
                </svg>
                <span>{{ changCount(playlist.commentCount) }}</span>
            </div>
            <div class="FooterItem">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lianjie"></use>
                </svg>
                <span>{{ changCount(playlist.shareCount) }}</span>
            </div>
            <div class="FooterItem">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
                </svg>
                <span>下载</span>
            </div>
            <div class="FooterItem">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xianshi_xuanze"></use>
                </svg>
                <span>多选</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["playlist"],

    methods: {
        onChange(num) {
            if (num && num.length >= 12) {
                return num.substring(0, 17) + '...'
            } else {
                return num
            }
        },
        changCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'
            } else {
                return num
            }
        }
    },
}

</script>

<style lang="less" scoped>
.itemTopFooter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;

    .FooterItem {
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;

        .icon {
            width: 2rem;
            margin: 5px 0;
        }
    }
}

.ItemMusicTop {

    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0.2rem;

    position: relative;

    .bgIMg {
      width: 100%;
      height: 11rem;
      position: fixed;
      z-index: -2;
      filter: blur(30px);
    }

    .itemLeft,
    .itemRight {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 10px;

        .icon {
            width: 0.6rem;
            height: 0.6rem;
        }

        span {
            font-size: 20px;
            color: white;
        }
    }


}



.ItemMusicMiddle {
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: space-between;

    .contentLeft {
        margin: 0 10px;

        img {
            width: 120px;
            height: 120px;
            border-radius: 0.4rem;
        }
    }

    .contentRight {
        margin: 0 10px;
        width: 70%;
        height: 100px;

        .rightP_one {
            color: white;
            font-size: 16px;
        }

        .right_img,
        .rightP_two {
            margin: 5px 0;
            font-size: 12px;
            display: flex;
            color: #33343c;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .icon {
                fill: #b0aaa6;
                width: 0.3rem;
                height: 0.3rem;
            }

        }
    }
}
</style>

